<template>
	<view class="cus-page">
		<!-- 自定义头部导航栏 -->
		<view class="navbar-box">
			<view :style="{height:sysInfo.statusBarHeight+'px'}"></view>
			<!-- #ifdef MP-WEIXIN || APP-PLUS -->
			<view class="com-flex com-row-center navbar" :style="{height:nevbarHeight+'px'}">
				<text class="com-font-34">煤炉</text>
			</view>
			<!-- #endif -->
			<view class="search-box">
				<view class="search">
					<u-search 
						:showAction="false"
						height="32px"
						bgColor="#FFF"
						searchIcon="/static/common/search.png"
						searchIconSize="48rpx"
						placeholder="搜索标题、类型" 
						v-model="keyword">
					</u-search>
				</view>
			</view>
			<!-- 筛选 -->
			<view class="com-flex com-row-center com-row-around screen">
				<view v-for="(item,index) in screens" :key="index" @tap="tapScreen(index)" 
					:class="['item',active == index ? 'item-active' : null]">
					<view class="com-flex">
						<text :class="['com-font-32', index == screens.length - 1 ? 'com-m-r-10' : null ]">
							{{ index == 2 ? priceModel.type == 0 ? "价格" : priceModel.columns[0][priceModel.type] : item.title}}
						</text>
						<u-icon v-if="index==2" 
							:name="priceModel.show ? 'arrow-up-fill' : 'arrow-down-fill'"
							:color="priceModel.show ? '#02BDF3' : '#212122'"
							size="24rpx" top="4rpx">
						</u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 头部安全距离 -->
		<u-gap :height="navbarGapHeigt+'px'" bgColor="transparent"></u-gap>
		<!-- 价格筛选 -->
		<u-picker :show="priceModel.show" 
			:columns="priceModel.columns"
			@cancel="priceModel.show=false"
			@confirm="selectPriceType">
		</u-picker>

		<!-- 列表 -->
		<view class="com-m-t-20 type-area">
			<ct-list-n />
		</view>

		<!-- 底部间距 -->
		<u-gap height="20rpx" bgColor="transparent"></u-gap>
	</view>
</template>

<script>
export default {
	name: "",
	props: {},
	components: {},

	data() {
		return {
			sysInfo: this.mixinGetSysInfo(),
			nevbarHeight: 44,
			navbarGapHeigt: 0,
			keyword: "",
			screens: [
				{ title: "综合", },
				{ title: "最新", },
				{ title: "价格", } 
			],
			active: 0,
			priceModel: {
				show: false,
				columns: [["全部","价格由低到高","价格有高到低"]],
				type: 0
			}
		};
	},

	computed: {},
	watch: {},

	mounted() {
		// #ifdef MP-WEIXIN
		this.setNavbar();
		// #endif

		// #ifdef MP-WEIXIN
		this.navbarGapHeigt = this.sysInfo.statusBarHeight + this.sysInfo.capsule.navBarH + 93
		// #endif
		// #ifdef H5|| APP-PLUS
		this.navbarGapHeigt = this.sysInfo.statusBarHeight + 44 + 93
		// #endif
	},

	methods: {
		// 设置navbar
		setNavbar(){
			const sysInfo = this.sysInfo;
			console.log("设别信息",sysInfo);
			this.nevbarHeight = sysInfo.capsule.navBarH;
		},

		// 筛选
		tapScreen(index){
			this.active = index;
			if(index==2) this.priceModel.show = true;
		},

		// 选择价格筛选类型
		selectPriceType(e){
			this.priceModel.type = e.indexs[0];
			this.priceModel.show = false;
		}
	},
};
</script>

<style scoped lang='scss'>
	.navbar-box{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		// background-image: linear-gradient(45deg, #F8F8F8, rgb(227, 252, 255));
		background: #fff;
		.search-box{
			padding: 7px 32rpx;
			.search{
				background: linear-gradient(0deg, #C3B0FF, #75EAFF);
				padding: 1px;
				border-radius: 32px;
			}
		}
		.screen{
			padding: 10px 0 15px 0;
			.item{
				position: relative;
				&-active{
					color: #02BDF3;
					&:after{
						content: "";
						width: 100%;
						height: 6rpx;
						background: #02BDF3;
						border-radius: 2px;
						position: absolute;
						bottom: -16rpx;
						left: 50%;
						transform: translate(-50%);
					}
				}
			}
		}
	}
</style>